<template>
	<scroll-view scroll-y   class="home_category">
		<view class="cate_item_wrap">
			<navigator class="cate_item" v-for="item in category" :key="item.id"
				:url="`/pages/imgCategory/index?id=${item.id}`">
				<image mode="aspectFill" :src="item.cover"></image>
				<view class="cate_name">{{item.name}}</view>
			</navigator>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		created() { //创建这个组件，就将首页页面的标题修改掉
			// 修改页面标题
			uni.setNavigationBarTitle({
				title: "分类"
			})
			this.getList()
		},
		methods: {
			getList() {
				this.request({
					url: "/v1/vertical/category"
				}).then(result => {
					this.category = result.res.category
					console.log(this.category);
				})
			}
		},
		data() {
			return {
				category: []
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home_category {
		// height:屏幕的高度(不同的手机高度不同，不能写死)-头部标题的高度  calc减号之间必须有空格
		// #ifdef H5
		height: calc( 100vh - 130px );
		// #endif
		
		// #ifndef H5
		height: calc( 100vh - 36px );
		// #endif
		.cate_item_wrap{
			display: flex;
			flex-wrap: wrap;
			.cate_item {
				width: 33.33%;
				position: relative;
				border: 3rpx solid #FFFFFF;
			
				image {
					height: 240rpx;
				}
				.cate_name {
					position: absolute;
					width: 100%;
					height: 50rpx;
					left: 0;
					bottom: 0;
					color: #FFFFFF;
					// css3 渐变
					background-image: linear-gradient(to right top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
					font-size: 32rpx;
					display: flex;
					align-content: center;
					padding-left: 20rpx;
				}
			}
		}
	}
</style>
